<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <head th:replace="mobile/common/header :: common_header(
    title=${contentInfo.name+'_'+contentInfo.novelName + '_' +webSiteName},
    keywords=${contentInfo.name+','+contentInfo.novelName},
    description=${contentInfo.name+','+contentInfo.novelName})">
    </head>
    <style scoped>

        [v-cloak]{
            display: none;
        }
    </style>



</head>
<body>
    <div id="app" v-cloak>
        <div :class="styleClass">
            <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    :offset="200"
                    finished-text="没有更多了"
                    v-model:error="error"
                    error-text="请求失败，点击重新加载"
                    @load="onLoad"
            >
                <div  v-for="(contentInfo,index) in list" @click="contentClick">
                    <div class="content-name">
                        <van-cell :title="contentInfo.name"/>
                    </div>
<!--                    <van-field-->
<!--                            v-model="contentInfo.contentText"-->
<!--                            :border="false"-->
<!--                            type="textarea"-->
<!--                            readonly-->
<!--                            :class="styleClass"-->
<!--                            autosize-->
<!--                            :style="{'min-height':(index == 0 ? '70vh':'10vh')}"-->

<!--                    ></van-field>-->
<!--                    <pre v-text="contentInfo.contentText"-->
<!--                         style="padding-left: 1.1em;padding-right: 1.1em;white-space: pre-wrap;word-wrap: break-word;-->
<!--                         font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;"-->
<!--                         :style="{'min-height':(index == 0 ? '70vh':'10vh')}"-->
<!--                         :class="styleClass">-->
<!--                    </pre>-->
                    <div v-html="contentInfo.contentText"
                         style="padding-left: 1.1em;padding-right: 1.1em;font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;"
                         :style="{'min-height':(index == 0 ? '70vh':'10vh')}"
                         :class="styleClass"
                    >
                    </div>

                </div>
<!--                <div style="text-align: center" v-show="onload">-->
<!--                    <van-loading color="#494c49" />-->
<!--                </div>-->

            </van-list>

<!--            设置部分开始-->
            <div id="setting">

                <div id="setting-top">
                    <van-popup v-model:show="show" position="top" :close-on-click-overlay="true" get-container="#setting-top" >
                        <van-nav-bar :title="currentContentInfo.name"  left-arrow @click-left="onClickLeft">
                            <template #right>
                                <van-icon name="home-o" size="20" @click="onClickHome"/>
                            </template>
                        </van-nav-bar>
                    </van-popup>
                </div>


                <div id="setting-center">
                    <van-popup v-model:show="show" :overlay="false" position="bottom" :close-on-click-overlay="true"
                               get-container="#setting-center" :square="true" :clickable="true">
                        <van-grid :column-num="3" :gutter="25" :border="false" :icon-size="18" >
                            <van-grid-item  icon="arrow-left"  text="上一章" :replace="true"  @click="clickLast" :url="currentContentInfo.lastChapterUrl"></van-grid-item>
                            <van-grid-item   text="" ></van-grid-item>
                            <van-grid-item  icon="arrow" text="下一章" :replace="true"  @click="clickNext"  :url="currentContentInfo.nextChapterUrl"></van-grid-item>
                        </van-grid>
                    </van-popup>
                </div>

                <div id="setting-bottom">
                    <van-popup v-model:show="show" :overlay="false" position="bottom" :close-on-click-overlay="true" get-container="#setting-center" :square="true">
                        <div style="padding: 1.5em 1em">
                            <van-slider v-model="fontSizeValue" :min="12" :max="18" bar-height="3" @update:model-value="styleClassChange" ></van-slider>
                        </div>

                        <van-radio-group v-model="bgChecked" direction="horizontal"  icon-size="24px" @change="styleClassChange">
                            <p class="bgCheckTitle"></p>
                            <van-radio  class="radioDefaultColor" checked-color="#d5c6ac" name="default"></van-radio>
                            <van-radio  class="radioTaupeColor"  checked-color="#c5a562" name="taupe"></van-radio>
                            <van-radio  class="radioDarkBlueColor" checked-color="#415962" name="darkBlue"></van-radio>
                            <van-radio  class="radioGreyColor" checked-color="#414441" name="grey"></van-radio>
                            <van-radio  class="radioDarkColor" checked-color="#081010" name="dark"></van-radio>
                        </van-radio-group>
                        <van-divider style="margin-top: 1em;margin-bottom: 5px"></van-divider>
                        <van-grid :column-num="1" :gutter="25" :border="false" :icon-size="18" >
                            <van-grid-item  icon="notes-o" text="目录"  @click="clickAllChapter"></van-grid-item>
<!--                            <van-grid-item  icon="setting-o" text="设置"></van-grid-item>-->
                        </van-grid>
                    </van-popup>
                </div>
            </div>
<!--            设置部分结束-->
        </div>

        <van-popup v-model:show="chapterShow" position="left" :close-on-popstate="true" :style="{ width: '75%' ,height: '100%' }">
            <van-cell-group v-for="chapter in allChapter">
                <van-cell :title="chapter.chapterName" :replace="true" is-link :url="chapter.chapterUrl"/>
            </van-cell-group>
        </van-popup>


    </div>
    <script th:inline="javascript">
        const app = Vue.createApp({
            data: ()=>({
                show: false,
                chapterShow:false,
                currentContentInfo: [[${contentInfo}]],
                list: [ [[${contentInfo}]] ],
                loading: false,
                ajaxLoading: false,
                finished: false,
                error:false,
                bgChecked: "default",
                fontSizeValue:16,
                styleClass:{"default":true,"fontSize16":true},
                allChapter:[]
            }),
            methods:{
                clickLast:function(){
                    if(this.currentContentInfo.lastChapterUrl == undefined || this.currentContentInfo.lastChapterUrl  == ""){
                        vant.Toast("没有上一章了")
                    }else{
                        window.location.replace(this.currentContentInfo.lastChapterUrl);
                    }
                },
                clickNext:function(){
                    if(this.currentContentInfo.nextChapterUrl == undefined || this.currentContentInfo.nextChapterUrl  == ""){
                        vant.Toast("没有下一章了")
                    }else{
                        window.location.replace(this.currentContentInfo.nextChapterUrl);
                    }

                },
                onLoad:function(){
                    if(!this.currentContentInfo.hasDataFlag){
                        this.loading = false;
                        return;
                    }
                    if(this.ajaxLoading){
                        return;
                    }
                    if(this.currentContentInfo.nextChapterId !== undefined && this.currentContentInfo.nextChapterId !== ""){
                        var self = this;
                        self.ajaxLoading = true;
                        $.ajax({
                            url: '/api/novel/contentInfo',
                            type: 'post',
                            data: JSON.stringify({"novelId":self.currentContentInfo.novelId,
                                "chapterId":self.currentContentInfo.nextChapterId}),
                            contentType: 'application/json',
                            success:function (res) {
                                if(res === undefined || res.success === false){
                                    self.error = true
                                    return;
                                }
                                let contentInfo = res.data
                                if(contentInfo !== undefined && contentInfo.name !== undefined && contentInfo.name !== "章节错误"){
                                    self.currentContentInfo =  contentInfo
                                    self.list.push(contentInfo)
                                }else{
                                    self.error = true
                                }
                                self.ajaxLoading = false;
                                self.loading = false;
                            },
                            error(err){
                                self.error = true
                                self.ajaxLoading = false;
                                self.loading = false;
                            }
                        })
                    }else{
                        this.finished = true;
                    }
                },
                contentClick:function(){
                    this.show = !this.show
                },
                onClickLeft(){
                    history.back(-1);
                },
                onClickHome(){
                    window.location.replace("/");
                },
                styleClassChange(){
                    this.styleClass = {};
                    this.styleClass[this.bgChecked] = true;
                    this.styleClass["fontSize"+this.fontSizeValue] = true;
                    $('body').attr("class",this.bgChecked)
                },
                clickAllChapter(){
                    vant.Toast.loading({
                        message: '章节获取中...',
                        forbidClick: true,
                        loadingType: 'spinner',
                    });
                    if(this.allChapter.length > 0){
                        vant.Toast.clear();
                    }
                    this.chapterShow = true;
                },


            },
            beforeCreate:function(){

            },
            created:function () {
                $('body').attr("class",this.bgChecked);
                var self = this;
                $.ajax({
                    url: '/api/novel/getChapter',
                    type: 'post',
                    data: JSON.stringify({"novelId": self.currentContentInfo.novelId}),
                    contentType: 'application/json',
                }).then(function (res) {
                    if(res!=undefined && res.success == true){
                        self.allChapter =  res.data
                    }
                    vant.Toast.clear();
                }).fail(function () {
                    vant.Toast.clear();
                });
            }
        }).use(vant).mount("#app")
    </script>
</body>


<style scoped>

    .van-radio{
        font-size: 12px;
        line-height: 1.5;
        margin-left: 2em;
    }

    .bgCheckTitle{
        color: #646566;
        font-size: 12px;
        line-height: 1.5;
    }

    .radioDefaultColor{
        background-color: #d5c6ac !important;
        border-color: #d5c6ac !important;
        border-radius: 100% !important;

    }
    .radioTaupeColor{
        background-color: #c5a562 !important;
        border-color: #c5a562 !important;
        border-radius: 100% !important;
    }
    .radioDarkBlueColor{
        background-color: #415962 !important;
        border-color: #415962 !important;
        border-radius: 100% !important;
    }
    .radioGreyColor{
        background-color: #414441 !important;
        border-color: #414441 !important;
        border-radius: 100% !important;
    }

    .radioDarkColor{
        background-color: #081010 !important;
        border-color: #081010 !important;
        border-radius: 100% !important;
    }

    .default {
        color: #494c49 !important;
        background-color: #d5c6ac;
    }
    .default .van-field__body textarea {
        color: #494c49 !important;
        background-color: #d5c6ac;
    }
    .default .content-name .van-cell{
        color: #494c49 !important;
        background-color: #d5c6ac;
    }

    .taupe {
        color: #101020 !important;
        background-color: #c5a562;
    }
    .taupe .van-field__body textarea {
        color: #101020 !important;
        background-color: #c5a562;
    }
    .taupe .content-name .van-cell{
        color: #101020 !important;
        background-color: #c5a562;
    }

    .darkBlue {
        color: #fff6e6 !important;
        background-color: #415962;
    }
    .darkBlue .van-field__body textarea {
        color: #fff6e6 !important;
        background-color: #415962;
    }
    .darkBlue .content-name .van-cell{
        color: #fff6e6 !important;
        background-color: #415962;
    }

    .grey {
        color: #d5cecd !important;
        background-color: #414441;
    }
    .grey .van-field__body textarea {
        color: #d5cecd !important;
        background-color: #414441;
    }
    .grey .content-name .van-cell{
        color: #d5cecd !important;
        background-color: #414441;
    }

    .dark {
        color: #b58931 !important;
        background-color: #081010;
    }
    .dark .van-field__body textarea {
        color: #b58931 !important;
        background-color: #081010;
    }
    .dark .content-name .van-cell{
        color: #b58931 !important;
        background-color: #081010;
    }

    .fontSize12{
        line-height: 25px;
        font-size: 12px;
    }
    .fontSize13{
        line-height: 26px;
        font-size: 13px;
    }
    .fontSize14{
        line-height: 27px;
        font-size: 14px;
    }
    .fontSize15{
        line-height: 28px;
        font-size: 15px;
    }
    .fontSize16{
        line-height: 29px;
        font-size: 16px;
    }
    .fontSize17{
        line-height: 30px;
        font-size: 17px;
    }
    .fontSize18{
        line-height: 31px;
        font-size: 18px;
    }


    .van-radio__icon--round .van-icon {
        border-radius: 100%;
    }

    .content-name .van-cell{
        font-weight: bold;
    }

    #setting-center .van-popup--bottom{
        width: 86%;
        left: 7%;
        bottom: 185px;
        border-radius:15px;
    }

</style>
</html>